<template>
    <div id="box">
        <div class="block" style="background-color: aqua;position: relative;">
            <img :src="newHeadImg" id="newHeadImg" />
            <el-upload style="position: absolute;top:0;left: 0;" class="avatar-uploader" :action="action"
                :show-file-list="false" Accep="*/*" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </div>
        <el-form label-width="120px" :model="formLabelAlign" style="margin-top: 100px;">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="用户名：">
                        <el-input v-model="formLabelAlign.userName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色：">
                        <el-input v-model="formLabelAlign.position" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话：">
                        <el-input v-model="formLabelAlign.phone" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                </el-col>
            </el-row>
            <div style="margin-top: 50px;display: flex; justify-content: center;">
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button @click="$router.go(-1)">关闭</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const formLabelAlign = reactive({
    userName: '',
    position: '',
    phone: '',
    headImg: '',
    id: "",
    userPass: ""
})
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const imageUrl = ref('')
// 调用公共方法
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
const { $config, $common } = proxy
const action = ref($config.envUrl + "/upload")
const newHeadImg = ref("")
// 查询数据
const getList = () => {
    axios({
        method: "get",
        url: $config.envUrl + "/login/list/" + $common.$getseSsionStorage("userId"),
    }).then(e => {
        formLabelAlign.userName = e.data.data.userName
        formLabelAlign.position = e.data.data.position
        formLabelAlign.phone = e.data.data.phone
        formLabelAlign.id = e.data.data.id
        formLabelAlign.userPass = e.data.data.userPass
        if (e.data.data.headImg) {
            formLabelAlign.headImg = e.data.data.headImg
            newHeadImg.value = `${$config.envUrl}/${e.data.data.headImg}`

        }
        axios({
            method: "get",
            url: $config.envUrl + "/download",
            responseType: 'blob',
            params: { filePath: formLabelAlign.headImg }
        }).then(item => {
            console.log(item.data, 9877)
            // const url = window.URL.createObjectURL(item.data);
            // const a = document.createElement('a');
            // a.href = url;
            // a.download = 'filename.jpg'; // 设置下载的文件名
            // a.click(); // 触发点击事件，开始下载
            // window.URL.revokeObjectURL(url);
        })
    })
}
getList()
// 修改数据
const onSubmit = () => {
    console.log('submit!')
    if (!formLabelAlign.phone) {
        ElMessage.error('电话不能为空')
        return
    }
    axios({
        method: "post",
        url: $config.envUrl + "/login/modify",
        data: { ...formLabelAlign }
    }).then(item => {
        console.log(item, 9877)
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
    })
}
// 上传文件
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    formLabelAlign.headImg = response.msg
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
</script>

<style lang="scss" scoped>
#box {
    margin: 100px auto;
    width: 800px;
    // background-color: red;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    padding: 100px 50px;
    border-radius: 10px;
}

.block {
    display: flex;
    justify-content: center;

}

.el-input {
    width: 250px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
    border: 1px dashed gray;
    border-radius: 50%;
}

.avatar-uploader {
    width: 80px !important;
    height: 80px !important;

}

::v-deep .el-upload {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.avatar {
    width: 100%;
    height: 100%;
}

#newHeadImg {
    margin-right: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}</style>